<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件知识点集</title>
    <script src="../lib/vue-2.4.0.js"></script>

</head>
<body>
<div id="app">

    <label>
        3中组件创建方式 & 私有组件创建方式 & 组件中的data，methods属性
    </label>


    <label>组件创建方式1：</label>
    <!-- 使用组件：直接把组件的名称 以 HTML标签的形式，引入到页面中。   -->
    <my-com1></my-com1>
    <hr>
    <mycom1></mycom1>
    <hr>
    <mycom2></mycom2>

    <hr>
    <label>组件创建方式2：</label>
    <mycom3></mycom3>

    <hr>
    <label>组件创建方式3：</label>
    <mycom></mycom>

</div>


<!-- 组件创建方式3 -->
<!-- 在被控制的 #app 外面，使用template元素，定义组件的HTML模板结构 -->
<template id="tmpl">
    <div>
        <h1> 这是通过 template 元素 在外部定义的组件结构，这个方式，有代码的提示和高亮显示</h1>
        <h2> en ha </h2>
    </div>
</template>


<!--   私有组件使用     -->
<div id="app2">
    <login></login>
    <login2></login2>
</div>
<template id="tmpl2">
    <div>
        <h3>这个是私有组件login2</h3>
    </div>
</template>


<!-- 组件中的data和methods属性 -->
<div id="app3">
    <mycom4></mycom4>
</div>

<script>

    /**
     Vue自定义组件格式：

        Vue.component(组件名称, {
            props:组件的属性,
            data: 组件的数据函数,
            template: 组件解析的标签模板
        })
     */

        //组件创建方式1：

    //1.1使用Vue.extend 来创建全局的Vue组件。
    let com1 = Vue.extend({
        //通过template属性，指定了组件要展示的HTML结构
        template: '<h3> 这是使用 Vue.extend 创建的组件</h3>'
    })

    //1.2 使用 Vue.component('组件名称',创建出来的组件模板对象) 定义全局组件
    //第一个参数：组件的名称 如果组件名称使用了驼峰命名的方式，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时两个单词之间使用 `-` 链接
    //第二个参数：Vue.extend创建的组件，其中的 template 属性就是组件将来要展示的HTML内容
    Vue.component('myCom1', com1)
    //组件的名称：如果不是使用驼峰命名，直接使用。
    Vue.component('mycom1', com1)

    //将上面的2步骤 可以合并到 一起，如下：
    Vue.component('mycom2', Vue.extend({
        template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
    }))


    //组件创建方式2：
    Vue.component('mycom3', {
        template: '<h3>这是使用 Vue.component 创建出来的组件</h3>'
    })

    // template: '<h3>这是使用 Vue.component 创建出来的组件</h3><span></span>' // error
    //注意： 组件创建的方式1和方式2 缺点：组件的 template 属性指向的模板内容，必须有且只有一个唯一的一个根元素。


    //组件创建方式3:
    Vue.component('mycom', {
        template: '#tmpl',
    })


    //组件中的data和methods属性
    //1.组件可以有自己的 data 数据 和 methods
    //2.组件的data是一个方法，并且返回值必须是一个 对象
    //3.组件的data和vue实例中的data使用方法一样。
    Vue.component('mycom4', {
        template: '<div><h3>组件中的data和methods属性：{{ msg }} </h3> <input type="button"  value="组件中的方法" @click="show"></div>',
        data: function () {
            return {
                msg: '是来自组件 data 中的 msg属性'
            }
        },
        methods: {
            show() {
                console.log("组件中的methods：show()方法")
            }
        }
    })


    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
    })


    //定义vue实例内部私有组件
    let vm2 = new Vue({
        el: '#app2',
        data: {},
        methods: {},
        components: {//定义vue实例内部私有组件
            login: {
                template: '<h3>这个是私有组件login</h3>'
            },
            login2: {
                template: '#tmpl2'
            }
        },
    })


    //组件中的data和methods属性
    let vm3 = new Vue({
        el: '#app3',
        data: {},
        methods: {},
    })

</script>
</body>
</html>
